<template>
	<Layout style="height: 100%" class="main">
		<Header class="header-con">
			<div class="hLeft">
				<div>
					<img :src="minLogo" alt="" />
				</div>
			</div>
			<div class="hright">
				<div class="divright">
					<Button type="primary">工作台</Button>
				</div>
			</div>
		</Header>
		<Layout class="main-content-con">
			<Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider">
				<side-menu theme="light" accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList">
					<template slot>
						<div class="side-logo">
							<span>AIMaaS</span>
						</div>
					</template>
				</side-menu>
			</Sider>
			<Content class="content-wrapper">
				<keep-alive :include="pageCache">
					<router-view v-if="!$route.meta.notCache"></router-view>
				</keep-alive>
				<router-view v-if="$route.meta.notCache" />
			</Content>
		</Layout>
	</Layout>
</template>
<script>
import SideMenu from './components/side-menu'
import { mapMutations, mapActions, mapGetters } from 'vuex'
import minLogo from '@/assets/images/logo.svg'
import './main.less'
export default {
	name: 'Main',
	components: {
		SideMenu
	},
	data() {
		return {
			collapsed: false,
			minLogo,
			isFullscreen: false,
			userAvatar: ''
		}
	},
	computed: {
		...mapGetters({
			pageCacheList: 'getPageCacheList'
		}),
		pageCache() {
			return this.pageCacheList.join(',')
		},
		username() {
			return this.$store.state.user.userName
		},
		tagRouter() {
			return this.$store.state.app.tagRouter
		},
		menuList() {
			return this.$store.state.app.menuList
		},
		local() {
			return this.$store.state.app.local
		}
	},
	methods: {
		...mapMutations(['setLocal', 'setHomeRoute']),
		...mapActions(['handleLogin', 'handleLogOut', 'getUserInfo']),
		turnToPage(route) {
			let { name, params, query } = {}
			if (typeof route === 'string') name = route
			else {
				name = route.name
				params = route.params
				query = route.query
			}
			if (name.indexOf('isTurnByHref_') > -1) {
				window.open(name.split('_')[1])
				return
			}
			this.$router.push({
				name,
				params,
				query
			})
		},
		handleCollapsedChange() {
			this.collapsed = !this.collapsed
		},
		handleClick(item) {
			this.turnToPage(item)
		}
	},
	watch: {
		$route(newRoute) {
			this.$refs.sideMenu.updateOpenName(newRoute.name)
		}
	},
	mounted() {
		this.setHomeRoute(this.$router.getRoutes())
	}
}
</script>
